<!-- 兑换 -->
<template>
	<view class="my-index-view">
		<view class="mt40" style="color:#FFD700">
			<text>我的积分:{{userinfo.user_account.integral}}</text>
		</view>
		<view class="mt40 dh " :class="arr[item.colour]" v-for="(item,index) in list " :key="index">
			<view class="dh-img">
				<image src="/static/icon/guan.png" mode="widthFix"></image>
			</view>
			<view class="type flex">
				<text>{{item.name}}</text>
				<view class="fengs">
					<text class="newfont">{{item.integral}}</text>
					<text>积分</text>
				</view>
			</view>
			<view class="info">
				<view class="">
					<text>会员说明：</text>
				</view>
				<view class="">
					<text>1、{{item.name}}有效期为{{item.number}}天</text>
				</view>
				<view class="">
					<text>2、兑换成功即开始生效，以生效时间为准计时{{item.number}}天</text>
				</view>
				<view class="duihuan" @click="handleCreate(item.id)">
					<text>兑换</text> 
				</view>
			</view>
		</view>
		<view class="mt60 mb60">
			<view >
				会员兑换说明：
			</view>
			<view >
				{{info}}
			</view>
		</view>
	</view>
</template>

<script>
	import { apiGetSystemView ,apiGetMemberIndex,apiPostOrderMemberCreate} from '@/api/me.js';
	export default {
		components: {},
		data() {
			return {
				info:'',
				arr:["",'baiy','huanj','heij'],
				list:[],
				userinfo:0,
				page:1,
				tempList:[],
				log:true,
				pageSize:15
			}
		},
		onLoad() {
			this.init()
			this.userinfo = uni.getStorageSync('userinfo')
		},
		onNavigationBarButtonTap() {
			this.$navTo.togo('/pages/me/record',{title:'dh'})
		},
		methods: {
			init(bool){
				return new Promise((resfn)=>{
					apiGetSystemView().then(res=>{
						this.info = res.data.product_member_info
					})
					this.getList(bool)
					resfn()
				})
				
			},
			getList(bool){
				apiGetMemberIndex({page_size:this.pageSize,page:this.page}).then(res=>{
					if(bool)this.list = []
					this.tempList = res.data.data
					this.list = this.list.concat(res.data.data)
					console.log(this.list)
				})
			},
			handleCreate(product_member_id){
				if(!this.log) return
				uni.showLoading({
					title:'兑换中'
				})
				this.log = false
				apiPostOrderMemberCreate({product_member_id}).then(res=>{
					uni.showToast({
						title:"兑换成功"
					})
					setTimeout(()=>{
						this.log = true
						uni.hideLoading()
					},2000)
				}).catch(()=>{
					setTimeout(()=>{
						this.log = true
					},2000)
				})
			}
		},
		onReachBottom(){
			if (this.tempList.length < this.pageSize) {
				return
			}
			this.page++
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init(true).then(res=>{
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			})
		
		}
	}
</script>

<style scoped lang="scss">
.mt40{
	margin-top: 40upx;
}
.my-index-view{
	padding: 0 24upx;
}
.mt60{
	margin-top: 60upx;
}
.mb60{
	margin-bottom: 60upx;
}
.dh{
	width: 100%;
	height: 240upx;
	overflow: hidden;
	position: relative;
	padding: 20upx 40upx;
	box-sizing: border-box;
	background: #000;
	border-radius: 8upx;
	.dh-img{
		position: absolute;
		right: -62upx;
		top: 28upx;
		width: 92*2upx;
		height: 92*2upx;
	}
}
.info{
	color: #747384;
	position: relative;
}
.fengs{
color: #fff;
}
.type{
	color: #747384;
	font-size: 28upx;
	height: 86upx;
	justify-content: space-between;
	align-items: center;
}
.duihuan {
	width: 70*2upx;
	height: 30*2upx;
	line-height: 30*2upx;
	font-size: 24upx;
	text-align: center;
	position: absolute;
	right: 0;
	color: #fff;
	top: 0;
	background: linear-gradient(22deg, #883B8B 0%, #F01332 100%);
	border-radius: 4*2upx;
}
.huanj {
	color: #000;
	background: linear-gradient(86deg,  #D4C394 0%,#AE7C24 100%);
}

.baiy {
	color: #000;
	background: linear-gradient(86deg, #D6D6D8 0%,#737375  100%);
}

.heij {
	color: #fff;
	background: linear-gradient(86deg, #1B1C17  0%, #3E3D40 100%);
}
.newfont{
	font-family: money;
	font-size: 64upx;
	margin-right: 10upx;
}
</style>
